@import 'common';

.photo-sheader {
    position: fixed;
    border: none;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 9999;
    .mlistbk, .mwhitebk {
        position: absolute;
        top: 0;
        left: 0;
        width: 40px;
        height: 100%;
        text-align: center;
        i {
            font-size: 22px;
            color: #FF4163;
            line-height: 48px;
            font-style: normal;
        }
    }
    .tab {
        width: 200px;
        margin: 0 auto;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -100px;
        margin-top: -14px;
        .aui-tab {
            width: 100%;
            overflow: hidden;
            .aui-tab-nav {
                width: 100%;
                display: box;
                box-sizing: border-box;
                font-size: 13px;
                height: 26px;
                overflow: hidden;
                position: relative;
            }
            .aui-tab-border {
                background-color: transparent;
                border: 1px solid;
                border-radius: 3px;
                border-color: #FC574C;
                color: #FC574C;
                li {
                    height: 26px;
                    box-sizing: border-box;
                    text-align: center;
                    display: inline-block;
                    overflow: hidden;
                    width: 33.33%;
                    line-height: 26px;
                    border-color: #FC574C;
                    vertical-align: super;
                }
                li{
                    border-left: 1px solid;
                }
                .active {
                    background-color: #ff4163;
                    color: #fff;
                    border-left:0 solid;
                    border-bottom: 2px #ff4163 solid;
                }
            }
        }
    }
    .mlistfrbox {
        position: absolute;
        right: 0;
        top: 0;
        width: 40px;
        height: 100%;
        text-align: center;
        i {
            font-size: 24px;
            color: #FF4163;
            line-height: 48px;
        }
    }
}
.mlisthd {
    height: 50px;
    line-height: 50px;
    background: #fff;
    border-bottom: 1px solid #eceef1 !important;
    text-align: center;
}

.swiper-container {
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    z-index: 1;
    .swiper-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 1;
        display: flex;
        transition-property: transform;
        box-sizing: content-box;
        .swiper-slide {
            flex-shrink: 0;
            width: 100%;
            height: 100%;
            position: relative;
            .nav-content {
                position: absolute;
                top: 0;
                bottom: 0;
                right: -85%;
                background: rgba(255,255,255,0.95);
                display: block;
                height: 100%;
                z-index: 9;
                width: 85%;
                border-left: 1px solid #DDD;
                .nav-listslt {
                    position: relative;
                    width: 100%;
                    overflow: hidden;
                    .titsx {
                        height: .45rem;
                        line-height: .45rem;
                        font-size: 1.1em;
                        color: #444;
                        text-align: left;
                        padding-left: .1rem;
                    }
                    .navpopwrap {
                        border-bottom: 1px solid #E7E6EC;
                        padding-bottom: .1rem;
                        .cuadd {
                            font-size: 0.9em;
                            color: #ff4163;
                            text-align: left;
                            padding-left: .1rem;
                            line-height: 2.8em;
                            position: relative;
                            em {
                                font-style: normal;
                            }
                        }
                        .navaddbox {
                            overflow: hidden;
                            padding: 0 .1rem;
                            ul {
                                width: 106%;
                                li {
                                    float: left;
                                    width: 46%;
                                    margin-right: 3%;
                                    text-align: center;
                                    a {
                                        width: 100%;
                                        display: block;
                                        background: #EFEFF3;
                                        color: #333;
                                        font-size: 0.8em;
                                        border-radius: 3px;
                                        margin-bottom: 8px;
                                        height: 3.1em;
                                        line-height: 3.1em;
                                    }
                                    .active {
                                        a {
                                            background-color: #ff4163;
                                            color: #fff;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
            .hidden {
                display: none;
            }
            .hideNav {
                animation: hideNav 0.35s ease forwards;
            }
            .swiper-container {
                margin: 0 auto;
                position: relative;
                overflow: hidden;
                z-index: 1;
                .swiper-wrapper {
                    transition-timing-function: ease-out;
                    margin: 0 auto;
                    .swiper-slide {
                        flex-shrink: 0;
                        height: 100%;
                        position: relative;
                    }
                    .order-nav {
                        border: 1px solid #D8CFD0;
                        border-radius: 3px;
                        width: 1.35rem;
                        font-size: 0.9em;
                        text-align: center;
                        line-height: 21px;
                        margin-right: 10px;
                    }
                    .active {
                        background-color: #ff4163;
                        color: #fff;
                    }
                }
            }
            #order-container {
                background: #fff;
                padding: .1rem .1rem .1rem .1rem;
            }
            .w320nopad {
                padding: 0px;
            }
            .w320 {
                margin: 0px auto;
                .w298listnew {
                    margin-top: 0px;
                    .chshoplist{
                        .listonebox {
                            border-bottom: 1px solid #E7E6EC;
                            background: #fff;
                            padding: .1rem;
                            transform: scale(1.4);
                            transition-duration: .7s;
                            opacity: 0;
                        }
                        .animateLi {
                            transform: scale(1);
                            transition-duration: .5s;
                            opacity: 1;
                            cursor: pointer;
                            .chpicbox {
                                width: 100%;
                                .listnametit {
                                    overflow: hidden;
                                    width: 100%;
                                    float: left;
                                    h3 {
                                        overflow: hidden;
                                        word-break: break-all;
                                        text-overflow: ellipsis;
                                        white-space: nowrap;
                                        padding-bottom: .03rem;
                                        font-size: 1.15em;
                                        float: left;
                                        font-weight: 500;
                                        float: left;
                                        color: #333;
                                    }
                                    .nameicon {
                                        float: left;
                                        display: block;
                                        padding-top: .04rem;
                                        padding-left: .05rem;
                                        .qiye {
                                            background: url(../img/icon2016.png) no-repeat 0 -132px transparent;
                                            width: 16px;
                                            height: 16px;
                                            background-size: 150px 150px;
                                        }
                                        .tuij {
                                            background: url(../img/icon2016.png) no-repeat 0 -91px transparent;
                                            width: 16px;
                                            height: 16px;
                                            background-size: 150px 150px;
                                        }
                                        .geti {
                                                background: url(../img/icon2016.png) no-repeat -18px -132px transparent;
                                                width: 16px;
                                                height: 16px;
                                                -webkit-background-size: 150px 150px;
                                                background-size: 150px 150px;
                                        }
                                        i {
                                            display: inline-block;
                                        }
                                    }
                                    .fraddt {
                                        padding-top: .03rem;
                                        font-size: 0.9em;
                                        color: #a6a6a6;
                                        font-weight: 500;
                                        display: block;
                                        float: right;
                                    }
                                }
                                .listnewddl {
                                    padding-top: .03rem;
                                    color: #707070;
                                    line-height: 1.6em;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    span {
                                        background: url(../img/icon2016.png) no-repeat -42px -127px transparent;
                                        width: 46px;
                                        height: 17px;
                                        background-size: 171px 171px;
                                        display: inline-block;
                                        position: relative;
                                        top: .03rem;
                                    }
                                }
                                .chpicinner {
                                    position: relative;
                                    color: #BFBFBF;
                                    font-size: 0.8em;
                                    padding-top: .05rem;
                                    font-weight: 500;
                                    em {
                                        font-style: normal;
                                    }
                                }
                            }
                            .chphotobox {
                                width: 100%;
                                overflow: hidden;
                                padding-top: .1rem;
                                position: relative;
                                ul {
                                    width: 120%;
                                    li {
                                        width: 26%;
                                        float: left;
                                        margin-right: .1rem;
                                        text-align: center;
                                        img {
                                            width: 100%;
                                            height: 100%;
                                            max-width: 100%;
                                            border-radius: 0px;
                                        }
                                    }
                                }
                                span {
                                    background: rgba(0,0,0,0.5);
                                    color: #EBEBEB;
                                    width: 45px;
                                    text-align: center;
                                    font-size: 0.8em;
                                    position: absolute;
                                    bottom: .2rem;
                                    right: 1%;
                                    border-top-left-radius: 3px;
                                    border-bottom-left-radius: 3px;
                                     em {
                                        font-size: 1.3em;
                                        display: block;
                                    }
                                }
                            }
                        }
                    }                    
                }
            }
        }
    }
}
